<script>
import { useRouter } from "vue-router";
import { useStore } from "../store/index";
import { public_status } from "../store/public_status";
import { reactive } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";
import { Toast } from "vant";
export default {
  setup() {
    public_status().display = false;

    // # 生成随机订单号
    let orderId = Number(
      new Date().getTime() + "" + parseInt(Math.random() * 1000)
    );
    console.log(orderId);

    // # 数据中心
    let data = reactive({
      address_default: null, // # 默认地址/选中的地址
      checked_coupon: null, // # 选择的优惠券
      reduce_num: null, // # 优惠值

      btn_isShow: false, // # 底部按钮的显示隐藏
      type_btn_isShow: false, // # 底部按钮的显示隐藏

      pay_type: null, // # 支付方式

      address_show: false, // # 地址列表弹出层
      coupon_show: false, // # 优惠券列表弹出层

      isGoPay: false, // # 确认支付弹窗
    });

    // # 页面渲染完加上类名产生动画效果
    onMounted(() => {
      setTimeout(() => {
        data.type_btn_isShow = true;
      }, 100);
    });

    // # 路由配置
    let router = useRouter();

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let userData = useStore().userData[userId]; // # 全部数据
    let Shopping_Cart = userData.Shopping_Cart.filter((item) => item.checked); // # 购物车
    let address = userData.address; // # 所有地址
    if (address.length > 0) {
      data.address_default = address.filter((item) => item.isDefault)[0];
      console.log(data.address_default);
    }
    let coupon = userData.coupon; // # 所有优惠券
    let balance = userData.balance; // # 余额

    let check_coupon = () => {};

    // # 计算总价
    let allPrice = computed(() => {
      let num = 0;
      Shopping_Cart.forEach((item) => (num += item.num * item.price));
      if (data.checked_coupon != null) {
        let type = coupon[data.checked_coupon].type;
        let limit = coupon[data.checked_coupon].limit;
        let value = coupon[data.checked_coupon].value;
        let oldNum = 0;
        if (type == "reduce" && num > limit) {
          oldNum = num;
          num -= value;
          data.reduce_num = parseInt(oldNum - num);
        } else if (type == "discount" && num > limit) {
          oldNum = num;
          num *= value / 10;
          data.reduce_num = parseInt(oldNum - num);
        }
      } else {
        data.reduce_num = null;
      }

      return parseInt(num);
    });

    // # 计算总数量
    let allNum = computed(() => {
      let num = 0;
      Shopping_Cart.forEach((item) => (num += item.num));
      return num;
    });

    // # 修改地址
    let change_address = (i) => {
      data.address_default = address[i];
      data.address_show = false;
    };

    // # 选择优惠券
    let coupon_address = (i) => {
      if (allPrice.value > coupon[i].limit) {
        data.checked_coupon = i;
        data.coupon_show = false;
      } else {
        Toast("门槛不足");
      }
    };

    console.log("支付商品==>", Shopping_Cart);
    console.log("地址==>", address);
    console.log("优惠券==>", coupon);
    console.log("余额==>", balance);

    // # 选择支付类型
    let pay_type = (e) => {
      data.pay_type = e.target.innerText;
      data.btn_isShow = true;
    };

    // # 支付_轻提示
    function loadingPay(order_state) {
      Toast.loading({
        message: "处理中...",
        forbidClick: true,
        loadingType: "spinner",
        onClose: () => {
          order_state == "待付款"
            ? Toast.fail("支付失败")
            : Toast.success("支付成功");
          router.push("/order?id=" + orderId);
        },
      });
    }

    /**
     *  # 核心功能 支付按钮
     */
    let goPay = (order_state) => {
      data.isGoPay = false;
      let { reduce_num, address_default, checked_coupon, pay_type } = data;
      // @ 订单数据
      let order_obj = {
        orderId, // % 订单号
        shopList: Shopping_Cart, // % 商品列表
        allPrice: allPrice.value, // % 总价
        allNum: allNum.value, // % 总数量
        reduce_num, // % 优惠值的下标
        address_default, // % 地址
        pay_type, // % 支付方式
        checked_coupon: checked_coupon == null ? null : coupon[checked_coupon], // % 优惠券
        order_state, // % 订单状态
      };

      if (data.address_default == null) {
        Toast("还未选择地址");
        return;
      }

      if (pay_type == null) {
        Toast("还未选择支付方式");
        return;
      }

      if (pay_type == "微信") {
        console.log(order_obj);
        userData.order.unshift(order_obj);
        loadingPay(order_state);
      }

      if (pay_type == "钱包") {
        if (balance > allPrice.value) {
          userData.order.unshift(order_obj);
          console.log(order_obj);

          if (order_state == "待发货") {
            userData.balance -= allPrice.value;
          }

          loadingPay(order_state);
        } else {
          Toast("余额不足");
          setTimeout(() => {
            router.push("/recharge");
          }, 500);
          return;
        }
      }

      userData.Shopping_Cart = userData.Shopping_Cart.filter(
        (item) => !item.checked
      );

      if (data.checked_coupon != null) {
        userData.coupon.splice(data.checked_coupon, 1);
      }
    };

    return {
      // ! 数据
      data,
      router,
      Shopping_Cart,
      address,
      coupon,
      orderId,

      // ! 计算属性
      allPrice,
      allNum,

      // ! 方法
      pay_type,
      check_coupon,
      change_address,
      coupon_address,
      goPay,
    };
  },
};
</script>

<template>
  <div class="payView">
    <!-- 头部 -->
    <div class="top_bg">
      <div class="back" @click="router.back()">
        <span class="iconfont icon-arrow-left"></span>
      </div>

      <div class="order_num">
        <div class="num">您的订单已准备</div>
        <div class="intro">订单号</div>
      </div>

      <div class="tell">{{ orderId }}</div>

      <div class="pic">
        <i
          class="iconfont icon-box-parcel-package-delivery-pack-office-facd"
        ></i>
      </div>
    </div>

    <!-- 地址 -->
    <div class="address" @click="data.address_show = true">
      <div class="top">
        <span class="iconfont icon-fuwumendian"></span>
        <router-link
          to="/address"
          v-show="address.length == 0"
          class="not_address"
        >
          暂无地址，前往设置 <i class="iconfont icon-jiantouyou"></i>
        </router-link>
        <p class="name" v-if="address.length > 0">
          {{ data.address_default.name }}
        </p>
        <p class="tel" v-if="address.length > 0">
          {{ data.address_default.tel }}
        </p>
      </div>

      <div class="bottom" v-if="address.length > 0">
        <p class="txt-cut">
          {{
            data.address_default.province +
            data.address_default.city +
            data.address_default.county +
            data.address_default.addressDetail
          }}
        </p>
      </div>

      <div class="btn" v-if="address.length > 0">
        <i class="iconfont icon-jiantouyou"></i>
      </div>
    </div>

    <!-- 订单列表 -->
    <ul class="lists">
      <li class="lis" v-for="(item, i) in Shopping_Cart" :key="i">
        <div class="left">
          <div class="img"><img :src="item.imgUrl" alt="" /></div>
          <div class="info">
            <h3 class="">{{ item.title }}</h3>
            <div class="sum">
              ×<span>{{ item.num }}</span>
            </div>
          </div>
        </div>
        <div class="price">
          <span class="one">￥</span>{{ item.price * item.num }}
        </div>
      </li>
    </ul>

    <!-- 优惠减免 -->
    <div class="sub">
      <h2>优惠减免合计</h2>
      <div class="sub_num">
        <span>-￥</span>{{ data.reduce_num == null ? 0 : data.reduce_num }}
      </div>
    </div>

    <!-- 优惠券 -->
    <div class="pay_num">
      <div class="pay">使用优惠券</div>
      <div class="right">
        <div class="topay">
          <span class="checked_coupon">{{
            data.checked_coupon != null ? coupon[data.checked_coupon].title : ""
          }}</span>
          <i
            @click="data.coupon_show = true"
            class="iconfont icon-jiantouyou"
            v-show="data.checked_coupon == null"
          ></i>
          <i
            v-show="data.checked_coupon != null"
            @click="data.checked_coupon = null"
            class="iconfont icon-jiahao del"
          ></i>
        </div>
      </div>
    </div>

    <!-- 支付 -->
    <div class="pay_num">
      <div class="pay">
        共 <span>{{ allNum }}</span>
        件商品
      </div>
      <div class="right">
        <h5>
          共优惠<span
            >￥{{ data.reduce_num == null ? 0 : data.reduce_num }}</span
          >
        </h5>
        <div class="topay">
          <span>实付￥</span>
          <span class="allPrice">{{ allPrice }}</span>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="order">
      <div class="title">订单信息</div>
      <div class="order_num">
        <div class="left">订单号</div>
        <div class="right">
          <div class="num">{{ orderId }}</div>
          <div class="add">+</div>
        </div>
      </div>
    </div>

    <!-- 支付方式 -->
    <div :class="['pay_type', { show: data.type_btn_isShow }]">
      <div class="item">
        <i
          :class="[
            'iconfont',
            { 'icon-xuankuang': data.pay_type != '微信' },
            { 'icon-radio-fill': data.pay_type == '微信' },
          ]"
        ></i>
        <span @click="pay_type">微信</span>
      </div>
      <div class="item">
        <i
          :class="[
            'iconfont',
            { 'icon-xuankuang': data.pay_type != '钱包' },
            { 'icon-radio-fill': data.pay_type == '钱包' },
          ]"
        ></i>
        <span @click="pay_type">钱包</span>
      </div>
    </div>

    <!-- 支付按钮 -->
    <div
      :class="['bottom_btn', { show: data.btn_isShow }]"
      @click="data.isGoPay = true"
    >
      去支付
    </div>

    <!-- 地址列表 -->
    <van-popup
      class="addressList"
      v-model:show="data.address_show"
      position="bottom"
      :overlay-style="{ background: 'rgba(0,0,0,.5)' }"
    >
      <div class="content">
        <div
          v-for="(item, i) in address"
          :class="['item', { checked: item.isDefault }]"
          :key="i"
          @click="change_address(i)"
        >
          <div class="top">
            <div class="name">{{ item.name }}</div>
            <div class="tel">{{ item.tel }}</div>
          </div>
          <div class="center">
            <div class="address">
              {{ item.province + item.city + item.county
              }}{{ item.addressDetail }}
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 优惠券列表 -->
    <van-popup
      class="couponList"
      v-model:show="data.coupon_show"
      position="bottom"
      :overlay-style="{ background: 'rgba(0,0,0,.5)' }"
    >
      <div class="content">
        <div
          class="item"
          v-for="(item, i) in coupon"
          :key="i"
          @click="coupon_address(i)"
        >
          <div class="limit">
            <div>
              {{ item.value
              }}<span>{{ item.type == "reduce" ? "元" : "折" }}</span>
            </div>

            <h6>满{{ item.limit }}元可用</h6>
          </div>
          <div class="touse">
            <div>
              <div class="intro">{{ item.title }}</div>
              <div class="limit_time">有效期至 2022-11-30</div>
            </div>
            <div class="btn">立即使用</div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 确认支付 -->
    <van-popup
      class="isGoPay"
      :style="{ 'border-radius': '10px' }"
      v-model:show="data.isGoPay"
      :overlay-style="{ background: 'rgba(0,0,0,0.6)' }"
    >
      <div class="content">
        <div class="question">是否支付？</div>
        <div class="bottom">
          <div class="item" @click="goPay('待付款')">否</div>
          <div class="item" @click="goPay('待发货')">是</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.payView {
  padding-bottom: 50px;

  // # 头部
  .top_bg {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 60px 0 30px;
    width: 100%;
    background: linear-gradient(320deg, #e0e0e0 20%, #fff);

    .back {
      position: absolute;
      top: 10px;

      height: 30px;
      line-height: 30px;
      width: 60px;

      background: #333;

      border-top-right-radius: 13px;
      border-bottom-right-radius: 13px;

      .icon-arrow-left {
        font-size: 15px;
        color: #fff;
        font-weight: 600;
        margin-left: 30px;
      }
    }

    .order_num {
      display: flex;
      align-items: center;

      .num {
        font-size: 18px;
        color: #222121;
        font-weight: 800;
        padding-left: 15px;
      }

      .intro {
        background-color: #726dfa;
        width: 50px;
        height: 25px;
        font-size: 10px;
        text-align: center;
        line-height: 25px;
        scale: 0.8;
        color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }

    .tell {
      font-size: 16px;
      margin-left: 15px;
      margin-top: 5px;
      font-weight: 800;
      height: 38px;
      line-height: 38px;
    }

    .pic {
      position: absolute;
      top: 28px;
      right: 20px;

      > i {
        font-size: 100px;
      }
    }
  }

  // # 地址
  > .address {
    margin-top: 22px;
    margin-left: 15px;
    position: relative;

    > .top {
      display: flex;
      align-items: center;

      margin-bottom: 10px;

      font-size: 18px;
      line-height: 18px;
      color: #0d0d0d;
      font-weight: 700;

      > .not_address {
        font-size: 14px;
        > i {
          font-size: 14px;
        }
      }

      > .tel {
        font-size: 16px;
        margin-left: 5px;
      }

      > span {
        padding-right: 5px;
      }
    }

    > .bottom {
      width: 70%;
      display: flex;
      align-items: center;
      margin-left: 20px;

      font-size: 16px;
      line-height: 22px;
      font-weight: bold;
    }

    > .btn {
      font-size: 16px;
      line-height: 16px;
      height: 16px;

      position: absolute;
      right: 15px;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }
  }

  // # 订单列表
  > .lists {
    padding-top: 20px;

    .lis {
      margin: 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;

      .left {
        display: flex;
        justify-content: space-between;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 8px;
          img {
            width: 70px;
            height: 70px;
          }
        }

        .info {
          flex: 1;

          h3 {
            font-size: 15px;
            color: #222222;
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            overflow: hidden;
            margin-bottom: 10px;
          }

          .sum {
            color: #9e9ea3;
          }
        }
      }

      .price {
        margin-top: 45px;
        font-size: 15px;
        font-weight: 700;
        flex-shrink: 0;

        span.one {
          display: inline-block;
          font-size: 10px;
          scale: 0.9;
          color: #000000;
        }
      }
    }
  }

  // # 优惠减免
  > .sub {
    padding: 0 15px;
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(241, 237, 237);

    h2 {
      font-size: 13px;
      color: #a5a4a9;
      font-weight: 700;
    }

    .sub_num {
      font-weight: 700;
      color: #000000;
      span {
        display: inline-block;
        font-size: 10px;
        scale: 0.9;
        color: #000000;
      }
    }
  }

  // # 支付
  > .pay_num {
    height: 56px;
    line-height: 56px;

    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid rgb(241, 237, 237);

    i.del {
      transform: rotate(45deg);
    }

    .checked_coupon {
      color: #3bdca6;
      margin-right: 5px;
    }

    .pay {
      font-size: 13px;
      line-height: 13px;
      color: #a5a4a9;
      font-weight: 700;
    }

    .right {
      display: flex;
      font-size: 13px;
      line-height: 20px;
      color: #1f1f1f;
      font-weight: 700;

      h5 {
        font-size: 13px;
        line-height: 20px;
        font-weight: 700;
        margin-right: 10px;

        span {
          color: #3bdca6;
        }
      }

      .topay {
        display: flex;

        .allPrice {
          font-size: 18px;
        }
      }
    }
  }

  // # 发票
  .bill {
    padding: 0 15px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(241, 237, 237);

    .title {
      color: #000000;
      font-size: 18px;
      font-weight: 700;
    }
    .bill_info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-size: 12px;
      color: #c3c3c3;
    }
  }

  // # 订单信息
  > .order {
    padding: 0 15px;

    .title {
      color: #000000;
      font-size: 18px;
      font-weight: 700;
      height: 65px;
      line-height: 65px;
    }
    .order_num {
      display: flex;
      justify-content: space-between;
      padding-bottom: 40px;
      .left {
        font-size: 13px;
        color: #a5a4a9;
        font-weight: 700;
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        .add {
          margin-left: 5px;
          border: 2px solid #000;
          width: 12px;
          height: 12px;
          text-align: center;
          border-radius: 3px;
        }
      }
    }
  }

  // # 底部按钮
  .pay_type,
  .bottom_btn {
    position: fixed;
    bottom: 0px;

    height: 50px;
    background: #333;

    color: #fff;
    line-height: 50px;
    text-align: center;
    font-weight: bold;

    transition: all 0.5s;
  }

  // # 底部按钮
  > .bottom_btn {
    width: 90px;
    right: -90px;

    font-size: 13px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;

    &.show {
      right: 0;
    }
  }

  // # 支付类型按钮
  > .pay_type {
    display: flex;

    left: -220px;

    width: 220px;

    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    > .item {
      flex: 1;

      display: flex;
      align-items: center;
      justify-content: center;

      > i {
        margin-right: 5px;
      }
    }

    &.show {
      left: 0;
    }
  }

  // # 地址列表弹出层
  > .addressList {
    position: relative;

    .content {
      max-height: 380px;
      overflow-y: scroll;
      padding: 20px 15px 10px;

      &::-webkit-scrollbar {
        display: none;
      }

      > .item {
        padding: 15px;
        margin-bottom: 15px;

        border-radius: 10px;
        background: #fff;
        box-shadow: 3px 3px 5px 5px rgba($color: #f0f0f0, $alpha: 0.77);

        transition: all 0.3s;
        position: relative;

        &.checked {
          background: #333;
          color: #fff;

          .center {
            border-color: #fff;
          }

          .bottom {
            i {
              color: #c0c0c0;
            }
          }
        }

        > .top {
          display: flex;
          align-items: flex-end;
          margin-bottom: 5px;

          > .name {
            font-size: 14px;
            font-weight: bold;
            margin-right: 10px;
          }
        }

        > .center {
          border-bottom: 1px dashed #333;
          padding-bottom: 10px;
          margin-bottom: 10px;

          > .address {
            font-size: 14px;
            line-height: 18px;
            margin: 0;
            margin-bottom: 5px;
          }

          > .details {
            font-size: 13px;
          }
        }
      }
    }
  }

  // # 优惠券列表弹出层
  > .couponList {
    position: relative;

    > .content {
      max-height: 380px;
      overflow-y: scroll;
      padding: 20px 15px 10px;

      &::-webkit-scrollbar {
        display: none;
      }

      .item {
        display: flex;
        height: 80px;
        border-radius: 12px;
        background-color: #f9f9f9;
        overflow: hidden;
        margin-bottom: 20px;

        .limit {
          box-sizing: border-box;
          width: 90px;
          height: 100%;
          background-color: #3fdfb0;
          color: #060007;
          font-size: 24px;
          text-align: center;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-weight: 700;

          span {
            font-size: 15px;
            color: rgba(7, 0, 0, 0.7);
            font-weight: 600;
          }

          h6 {
            font-size: 10px;
            color: rgba(41, 41, 41, 0.5);
            font-weight: 600;
          }

          &::before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: 40px;
            left: -7px;
          }
        }

        .touse {
          padding: 0 20px;
          height: 100%;
          display: flex;
          align-items: center;
          width: 63%;
          justify-content: space-between;

          .intro {
            font-size: 19px;
            color: #0f0f0f;
            font-weight: 600;
          }

          .limit_time {
            font-size: 10px;
            color: #c2c1c6;
          }

          .btn {
            height: 25px;
            line-height: 25px;
            border: 2px solid #71d9b6;
            color: #71d9b6;
            font-size: 11px;
            text-align: center;
            width: 60px;
            border-radius: 18px;
            position: relative;

            .rule {
              position: absolute;
              bottom: -29px;
              left: 3px;
              font-size: 10px;
              color: #c2c1c6;
              scale: 0.8;
            }
          }
        }
      }
    }
  }

  // # 确认支付弹窗
  > .isGoPay {
    position: relative;

    > .content {
      width: 230px;
      height: 120px;
      overflow: hidden;

      > .question {
        height: 80px;
        line-height: 80px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #e8e8e8;
      }

      > .bottom {
        display: flex;
        height: 40px;
        line-height: 40px;

        > .item {
          flex: 1;
          text-align: center;
          border-right: 1px solid #e8e8e8;
        }
      }
    }
  }
}
</style>